import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager, Modal } from 'react-native';
import navigationSeevice from '../../../../../../components/navigation/navigationSeevice';
import { GLOBAL } from '../../../../../../config/global';
import { orderStyle, commonStyle } from '../../_common/style';
import { style } from '../../../../../../theme/style'
import HTTP from '../../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../../config/api';
import { ProductEditing } from '../../../../highSeas/_components/ProductEditing';
import { ScrollView } from 'react-native-gesture-handler';

const scale = GLOBAL.SCALE;
export class GoodsBockCpt extends Component {
	constructor(props) {
		super(props);
		let { visible } = props.data || {};
		let { companyInfoVO, companyGoodsTreeList } = props.baseData || {};

		this.state = {
			visible,
			startHeight: 0,
			imgObj: new Animated.Value(1),
			goodsModal: false,
			searching: false,
			goodsTreeList: companyGoodsTreeList
		}
		this.onOff = true;

		this.params = {
			companyId: companyInfoVO.companyId || '',
			searchKey: '',
			sourceFlag: 1
		};
	}

	componentWillReceiveProps(props) {
		let { baseData } = props || {};
		let { companyGoodsTreeList } = baseData || {};
		let { goodsTreeList } = this.state;
		this.setState({
			goodsTreeList: goodsTreeList ? goodsTreeList : companyGoodsTreeList
		})
	}

	// 动画
	_startAnimated = () => {
		let { isHeight, startHeight, heightObj, imgObj } = this.state;
		if (isHeight) {
			Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
			Animated.timing(heightObj, { toValue: startHeight, duration: 300, }).start(() => { this.setState({ isHeight: !isHeight }) });
		} else {
			Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
			Animated.timing(heightObj, { toValue: 0, duration: 300 }).start(() => { this.setState({ isHeight: !isHeight }) })
		}
	}

	_onLayout = (event) => {
		let startHeight = 0;
		startHeight = event.nativeEvent.layout.height;

		if (this.onOff) {
			this.setState({
				startHeight,
				heightObj: new Animated.Value(0),
				isHeight: true,
			})
			this.onOff = false
		}
	}

	//企业经营品类查询
	async _getGoodsData(searchKey) {
		let { baseData } = this.props || {};
		const { id, status, choice } = baseData || {};
		this.params.searchKey = searchKey.searchCode;
		//审批中的详情。审批中的企业品类取详情中的goodsTreeList。
		this.params.id = id;
		this.params.bizType = 'COMPANY_GOODS_INFO';
		this.params.corpId = choice.corpId || '';
		let responseData = await HTTP.POST(API_GENERATE(status ? API.CUSTOMER_DETAIL : API.GET_CUSTOMER_APPLY_DETAIL), this.params);
		this.setState({ goodsTreeList: status ? responseData : responseData.goodsTreeList, searching: false });
	}

	_cancelPress(a) {
		this.setState({ goodsModal: false })
	}

	render() {
		let { data, renderView, titleStyle, onTitlePress, titleIcon, baseData } = this.props || {};
		let { listData, title, refresh, changeIndex } = data || {};
		const { ifEdit, choice } = baseData || {};
		let titleImgObj = require('../../../../../../imgs/global/down.png');
		let { heightObj, imgObj, isHeight, goodsModal, searching, goodsTreeList } = this.state;
		const spin = imgObj.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '-90deg'] //输出值
		})
		return (
			<View style={orderStyle.block}>
				<TouchableOpacity activeOpacity={1} onPress={this._startAnimated} style={[{ padding: 5 * scale }, commonStyle.row2]}>
					<View style={{ flexDirection: 'row', alignItems: 'center' }}>
						<Text style={[commonStyle.fontTitle, titleStyle]} onPress={() => onTitlePress && onTitlePress()}>{title}</Text>
						{titleIcon ? <Image source={titleIcon} style={{ marginLeft: 10 * scale, width: 15 * scale, height: 15 * scale }} /> : null}
						{!isHeight ? <Text style={[commonStyle.goodsSubTitle, styles.border]} onPress={() => this.setState({ goodsModal: true })}>企业经营品类</Text> : null}
						{changeIndex ? <Text style={styles.changeText}>(变更)</Text> : null}
					</View>
					<View style={styles.imgBox}>
						<Animated.Image style={[styles.imgStyle, { transform: [{ rotate: spin }] }]} source={titleImgObj}></Animated.Image>
					</View>
				</TouchableOpacity>
				<Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
					<ScrollView>
						<View ref='zy' onLayout={(event) => this._onLayout(event)} style={[styles.body]}>
							{
								listData && listData.length ?
									listData.map((item, index) => {
										return renderView(item, index, listData.length, refresh, changeIndex)
									})
									: (<Text style={{ fontSize: 10 * scale }}>企业品类暂未关联业务员</Text>)
							}
						</View>
					</ScrollView>
				</Animated.View>
				<Modal animationType={"fade"}
					transparent={true}
					onRequestClose={() => { console.log(1) }}
					visible={goodsModal}>
					<View style={styles.back}>
						<TouchableOpacity activeOpacity={1} style={styles.bg} onPress={() => { this._cancelPress() }}>
						</TouchableOpacity>
						{/**企业经营品类 */}
						<ProductEditing
							searchPress={(searchCode) => {
								this.setState({
									searching: true
								}, () => {
									this._getGoodsData(searchCode)
								})
							}}

							data={goodsModal ? goodsTreeList : []}
							visible={true}
							secondRight={true}
							searching={searching}
							rightBtnsList={ifEdit ? [{
								btnText: '新增经营品类',
								btnFun: () => {
									this.setState({
										goodsModal: false
									}, () => navigationSeevice.navigate('newProject', { companyId: this.params.companyId, choice }));
								}
							}] : []} />
					</View>
				</Modal>

			</View>
		)
	}
}

const styles = StyleSheet.create({
	imgBox: {
		paddingTop: 5 * scale,
		paddingBottom: 5 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 5 * scale
	},
	imgStyle: {
		tintColor: '#D8D8D8',
		width: 10 * scale,
		height: 6 * scale
	},
	body: {
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
	},
	bockCptTitleStyle: {
		fontSize: 12 * scale
	},
	changeText: {
		color: style.color.fontRed1,
		fontSize: 12 * scale,
		paddingLeft: 5 * scale
	},
	back: {
		width: 375 * scale,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		height: GLOBAL.SCREEN_HEIGHT,
	},
	bg: {
		width: 375 * scale,
		height: '20%',
	},
	border: {
		borderStyle: 'solid',
		borderColor: style.color.themeColor,
		borderWidth: 1 * scale,
		borderRadius: 7 * scale,
		padding: 5 * scale
	}
})